<!doctype html>
<html>
<head>
    <meta charset="utf-8">
     <meta charset="UTF-8">
    <title>基础知识学习</title>
    <link rel="stylesheet" href="/static/skin/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/skin/css/animate.min.css">
    <link rel="stylesheet" href="/static/skin/css/style.css">
        <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/css1/style.css" rel="stylesheet" type="text/css" />
<title>无标题文档</title>
   <style type="text/css">
         #div1{
             position: absolute;
             height: 50px;
             width: 50px;
			 left: 50%;
			 top: 500px;
            background: #5F5F5F;
			 visibility: hidden
         }
	   #div2{
            position: absolute;
            height: 50px;
            width: 50px;
		    left: 50%;
		   	top: 500px;
            background:#8C9E3C;
		    visibility: hidden
         }
	   #div3{
            position: absolute;
            height: 100px;
            width: 30%;
           left: 45%;
		   	top: 500px;
            background-color:rgba(58,168,213,0.5);
         }
    </style>

</head>
<body id="moar">
    <header class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <h1 class="logo"><a class="navbar-brand" href="javascript:;">我的网站</a></h1>
    </div>
    <nav class="collapse navbar-right navbar-collapse" role="navigation">
      <ul class="list-inline navbar-nav">
						<li>
							<a href="/studysystem/welcome/">首页</a>
						</li>

						<li>
							<a href="/studysystem/pretest/">预备测试</a>
						</li>

						<li>
							<a href="/studysystem/bstudy/">基础知识学习</a>
						</li>

						<li>
							<a href="/studysystem/test_paper_add/">生成试卷</a>
						</li>

						<li>
							<a href="/studysystem/test_paper_show/">题目训练</a>
						</li>
                        <li>
							<a href="/studysystem/summarize/">总结</a>
						</li>

						<li>
							<a href="/studysystem/login/">登录</a>
						</li>

						<li>
							<a href="/studysystem/register/">注册</a>
						</li>

						<li>
							<a href="/studysystem/logout/">登出</a>
						</li>
          <li class="tel visible-lg-inline-block"><a href="javascript:;"><span class="icon-page-lianxi"></span> 物理|浮力 </a></li>
      </ul>
    </nav>
  </div>
</header>
<div style="margin-top: 400px;margin-left: 45%;">
    <div style="font-size: 30px;">探究不同物体在水中的浮沉情况</div>
    <div>
        <input  id="btn1" type="button" value="铁块">
        <input  id="btn3" type="button" value="松开铁块">
        <input  id="btn2" type="button" value="木块">
        <input  id="btn4" type="button" value="松开木块">
      </div>
  <div id="div2"></div>
  <div id="div1"></div>
  <div id="div3"></div>
  <script type="text/javascript">
            var btn1=document.getElementById('btn1');
		 	var btn2=document.getElementById('btn2');
		 	var btn3=document.getElementById('btn3');
		 	var btn4=document.getElementById('btn4');
		 	var div1=document.getElementById('div1');
		 	var div2=document.getElementById('div2');
            var Time=null;
            var speed=0;

           	btn3.onclick=function () {
				btn1.style.visibility="hidden"
			 	btn2.style.visibility="visible"
			 	btn3.style.visibility="hidden"
			 	btn4.style.visibility="hidden"
				startMove11();
            }

          function startMove11 () {
			   clearInterval(Time);
			   speed=0;
               Time=setInterval(function(){
					speed+= 3;
                    var T = div1.offsetTop + speed;
                    if(T > 600 - div1.offsetHeight)
					 {
                        T = 600 - div1.offsetHeight;
                        speed *= -1;
                        speed *= 0.75;
                    }
                    div1.style.top=T+'px';
				}, 60)
            }
		 btn4.onclick=function () {
			 	btn1.style.visibility="visible"
			 	btn2.style.visibility="hidden"
			 	btn3.style.visibility="hidden"
			 	btn4.style.visibility="hidden"
				startMove12();
            }

          function startMove12 () {
			   clearInterval(Time);
			   speed=0;
               Time=setInterval(function(){
					speed += 3;
                    var T = div2.offsetTop - speed;
                    if(T < (div2.offsetTop-6))
					 {
                       	clearInterval(Time);
                    }
                    div2.style.top=T+'px';
				}, 60)
		  }
		 btn1.onclick=function () {
			 btn1.style.visibility="hidden"
			 btn2.style.visibility="hidden"
			 btn3.style.visibility="visible"
			 btn4.style.visibility="hidden"
             div2.style.visibility="hidden";
			 div2.style.top = '500px';
			 div1.style.top = '500px';
			 div1.style.visibility="visible";
            }
		 btn2.onclick=function () {
			 btn2.style.visibility="hidden"
			 btn1.style.visibility="hidden"
			 btn3.style.visibility="hidden"
			 btn4.style.visibility="visible"
             div1.style.visibility="hidden";
			 div1.style.top = '500px';
			 div2.style.visibility="visible";
			 div2.style.top = '500px';

            }
	</script>
</div>
</body>
</html>
